<template>
<div>
    <div class="boxsd">
      <div class="bordt" >
        <div class="toto">
            <h3>
                <span class="left">
                    <span class="iconfont icon-zuoyou1" @click="$router.go('-1')"></span>
                </span>
                <span class="sp">喜欢的音乐</span>
                <span class="rigth">
                    <span class="iconfont icon-24gl-plusCircle"></span>
                </span>
            </h3>
        </div>
        <ul v-if="mylvoelist.playlist">
            <div class="pp">
               <div>
                    <span>&nbsp; 共<span>{{mylvoelist.playlist.tracks.length}}</span>首</span>
               </div>
            </div>
            <li v-for="(item) in mylvoelist.playlist.tracks" :key="item.id" @click="asd(item.id)">
                <div class="podlistleft">
                      <!-- <van-image
                     lazy-load
                     :src="item.al.picUrl"
                    /> -->
                    <img v-lazy="item.al.picUrl" alt="">
                </div>
                <div class="podlistright">
                    <div class="elft">
                        <h3 class="topn"><span>{{item.name}}</span></h3>
                         <h3  class="bt"><span>{{item.name}}</span>---<span class="te">{{item.ar[0].name}}</span></h3>
                    </div>
                    <div class="ri">
                        <span class="iconfont icon-bofang"></span>
                    </div>
                </div>
            </li>
        </ul>
      </div>
    </div>
</div>
</template>

<script>
import {
     getmineinformation,
     getmineaccount,
     getminesonglist,
     getnamesonger,
     getyonhuhtis,
     getmniexihun,
     getmniezhuanlan,
     getplaydetail
     } from "../../api/suerinfo"
export default {
     data(){
        return{
            mineliet:{
            },
            minestate:{},
            minelist:{},
            minuid:null,
            // boboto:true,
            hotsds:{},//历史
            xinhuanlist:[],
            mylvoelist:{},
            // boboo:false
        }
    },
    methods:{
         get(){
            //获取账号信息
             getmineaccount().then(data=>{
                // console.log(data);
                this.minelist=data;
                this.minuid=data.profile.userId
                console.log(this.minuid)
                this.$emit("getnineuid",this.minuid)
            })
        },
        getmy(){
           // console.log( window.localStorage)getminesonglist
           getmineinformation({
               uid:this.minuid
           }).then(data=>{
            //    console.log(data);
                this.minestate=data;
                ////获取用户信息 , 歌单，收藏，mv, dj 数量
                getminesonglist({
                     uid:this.minuid
                }).then(data=>{
                    console.log("获取用户信息 , 歌单，收藏，mv, dj 数量",data);
                    this.mineliet=data
                })
                ////获取用户歌单
                getnamesonger({
                     uid:this.minuid
                }).then(data=>{
                     console.log("用户歌单",data);
                })
                //收藏的专栏
                getmniezhuanlan({
                     uid:this.minuid
                }).then(data=>{
                    console.log("收藏的专栏",data)
                })

           })
        },
        //获取歌单详情
        getgedan(){
             this.boboo=false
            getplaydetail({id:2641572119}).then(data=>{
                console.log("用户喜欢的歌单详情",data)
                this.mylvoelist=data
            })
        },
        //播放历史
        gethoslishi(){
            // this.boboto=false;
            getyonhuhtis({uid:this.minuid}).then(data=>{
                console.log("历史",data)
                this.hotsds = data
            })
        },
        //喜欢的音乐列表 playlist tracks name
        getxihuan(){
             getplaydetail({id:2641572119}).then(data=>{
                console.log("用户喜欢的歌单详情",data)
                this.mylvoelist=data
            })
              this.boboo=true
            getmniexihun({uid:this.minuid}).then(data=>{
                console.log("喜欢的音乐列表",data)
               
                this.xinhuanlist=data
                 console.log("喜欢音乐列表",this.xinhuanlist)
            })
        },
        dfg(id){
            this.$emit("getnineuid",id);
        },
        asd(id){
            console.log(id)
              this.$emit("get-player-id",id)
              this.$emit("get-play-all-id",this.$route.query.id);//传递di
        }
    },
    created(){
        this.get();
        this.getgedan();
        this.gethoslishi();
    },
    watch:{
        minuid(){
            this.getmy();
        }
    }
}
</script>

<style lang="less">
 .boxsd{
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    position: relative;
}
.bordt{
     width: 100%;
     padding-bottom: 45px;
      box-sizing:border-box;
    .toto{
        width: 100%;
        height: 300px;
        font-size: 18px;
        padding: 10px;
        // 
        box-sizing:border-box;
          background-image: url("http://p1.music.126.net/1UV7jKj6i3ob1WUCsYZmNw==/109951164552974748.jpg");
         background-color: #fff;
            background-size: 100%;
             background-repeat: no-repeat;
        // display: ;
        h3{
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 18px;
             font-weight: 400;
             background-image: url();
              span{
                  &.left{
                      text-align: left;
                  }
                  &.sp{
                      text-align:center;
                  }
                  &.rigth{
                      text-align:right;
                  }
                  
                  line-height: 30px;
                  display: block;
                  color: white;
                &.iconfont{
                    // display: block;
                    width: 40px;
                    height: 100%;
                }
            }
        }
    }

    ul{
     width: 100%;
    //  border-radius: 10px;
    //  border-radius: 10px;
    //  padding: 10px;
     box-sizing: border-box;
     padding-bottom: 20px;
     background-image: 100%;
     .pp{
         width: 100%;
         height: 20px;
         line-height: 40px;
         position: relative;
        //  border-bottom: 1px solid rgb(126, 125, 125);
         div{
             width: 100%;
             height: 40px;
             line-height: 40px;
             position: absolute;
             left: 0;
             top: -20px;
             background-color: #fff;
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
         }
     }
     li{
         width: 100%;
         height: 60px;
         font-size: 16px;
        //  margin-top: 5px;
        //  margin-bottom: 5px;
        background-color: #fff;
        margin-top: 1px;
        // border-bottom: 1px solid rgb(126, 125, 125);
         display: flex;
          .podlistleft{
            width: 20%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            img{
                width: 100%;
                // height: 45px;
            }
         }
          .podlistright{
             width: 100%;
             height: 100%;
             padding: 10px;
             padding-left: 0px;
             display: flex;
             justify-content: space-between;
             box-sizing:border-box;
            div{
             &.elft{
                width: 80%;
                height: 100%;
               h3{
                 width: 90%;
                 overflow: hidden;
                 box-sizing: border-box;
                 font-size: 16px;
                 font-weight: 400;
                 height: 23px;
                 overflow: hidden;
                    &.bt{
                        width:80%;;
                        height: 18px;
                        font-size: 12px;
                        color: #999797;
                     }
                 }
              }
              &.ri{
                  width: 10%;
                  height: 100%;
                  line-height: 40px;
                  text-align: right;
                  span{
                      font-size: 22px;
                  }
              }
            }
               
         }
    }
  }
}
</style>